import React, { useEffect, useState, } from "react"
import "./addDefence.less"
import { NavLink } from "umi"
import { Button, Form, Input, DatePicker, message, Select, Cascader, Table } from 'antd';
import { SaveOutlined, FormOutlined } from '@ant-design/icons'
import { ISfenceList, RootObject, sss, RootGroup } from "@/utils/index"
import { getDefanceList, getClasssPlanTree, defence, selectClassPlanInit } from "@/services/modules/defence"
import moment from 'moment';
const dateFormat = 'YYYY/MM/DD';

const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
};
const changeDate = (now: any) => {

    console.log(now);
    // 中国区的时间格式
    let time = new Date(now._d)
    console.log(time);
    let d = new Date(time);
    // 格式转换
    let dateValue = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
}

const residences = [
    {
        "value": "9",
        "label": "网站2021A班",
        "parentId": null,
        "children": [
            {
                "value": "4fb90a8e34e4445ca25ce210d4cdc321",
                "label": "fsaf",
                "parentId": null,
                "children": null,
                "content": null,
                "proId": null
            },
            {
                "value": "12e24e75071b4315974416c6a3f81080",
                "label": "演示计划",
                "parentId": null,
                "children": null,
                "content": null,
                "proId": null
            }
        ],
        "content": null,
        "proId": null
    }
]
const success = () => {
    message.success('提交成功');
};
const { RangePicker } = DatePicker;

const rangeConfig = {
    rules: [{ type: 'array' as const, required: true, message: 'Please select time!' }],
};
const addDefence: React.FC = (props) => {
    const [state, setstate] = useState<ISfenceList[]>([]);   //头部数据
    const [ClasssPlanTree, setClasssPlanTree] = useState<RootObject[]>([])    //班级/计划 的 数据
    const [commitName, setCommitName] = useState('')  //答辩地址
    const [name, setName] = useState('')      //答辩名称
    const [isEdit, setIsEdit] = useState(true);   //是否编辑
    const [list, setList] = useState([])    // 表格

    const onFinish = (values: any) => {
        function add0(m: any) { return m < 10 ? '0' + m : m }
        function format(shijianchuo: any) {
            //ijianchuo是整数，否则要parseInt转换 
            var time = new Date(shijianchuo);
            var y = time.getFullYear();
            var m = time.getMonth() + 1;
            var d = time.getDate();
            var h = time.getHours();
            var mm = time.getMinutes();
            var s = time.getSeconds();
            return y + '-' + add0(m) + '-' + add0(d) + ' ' + add0(h) + ':' + add0(mm) + ':' + add0(s);
        }
        let defenceCreateTime: string = format(values.time[0]._d);
        let defenceEndTime: string = format(values.time[1]._d);
        console.log(defenceCreateTime, "defenceCreateTime", defenceEndTime, "defenceEndTime",);
        let time = [];
        time.push(defenceCreateTime)
        time.push(defenceEndTime)
        let obj = { defenceId: "", degenceName: values.degenceName, defenceClassId: values.classplan[0], defencePlanId: values.classplan[1], defenceCreateTime, defenceEndTime, defenceMajorId: `P000${values.defenceMajorId}`, defenceAdress: values.defenceAdress, defenceScore: '', classplan: [values.classplan[0], values.classplan[1]], time: time, majorList: '', defenceAuthorName: '郭老师' }
        defence(obj as sss).then(ok => {
            if (ok.code == 200) {
                let classid = ok.data.defenceClassId
                let classPlanid = ok.data.defencePlanId
                selectClassPlanInit(classid, classPlanid).then(res => {
                    if (res.code == 200) {
                        console.log(res.data.list, "res.data.list");

                        setList(res.data.list)
                    }
                })
            }
        })
    };
    //发起请求
    useEffect(() => {
        // 头部数据
        getDefanceList().then((res: any) => {
            if (res.code == 200) {
                setstate(res.data)
            }
        })
        // 班级/计划 的 数据
        getClasssPlanTree().then((ok: any) => {
            if (ok.code == 200) {
                setClasssPlanTree(ok.data)
            }
        })
    }, [])


    return <div className='box_model'>
        <div className='breadcrumb_list'>
            <div className='el-breadcrumb middle_text'>
                <span>答辩 / 答辩管理</span>
            </div>
        </div>
        <div className='box_content'>
            <div className='baseinfo'>
                <div className='addProject_title top'>
                    <div className='top_left'>
                        <h3>发起答辩</h3>
                    </div>
                    <div className='top_right'>
                        <NavLink to='/teachers/defence/defence'><Button>返回</Button></NavLink>
                        <Button onClick={success}>提交</Button>
                    </div>
                </div>
                <Form {...layout} name="nest-messages" onFinish={onFinish}>
                    <Form.Item className='ant-form-item1' wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
                        {isEdit ? <Button style={{ color: '#679cf6', fontSize: '14px', border: 'none', outline: "none" }} icon={<SaveOutlined />} htmlType="submit">
                            保存
                        </Button> : <Button style={{ color: '#679cf6', fontSize: '14px', border: 'none', outline: "none" }} icon={<FormOutlined />} htmlType="submit">
                            编辑
                        </Button>}
                    </Form.Item>
                    <div className='ant-form-item2'>
                        <Form.Item label="答辩名称" style={{ width: '400px' }} name="degenceName" rules={[{ required: true, message: "请输入答辩名称" }]}>
                            <Input value={name} onChange={e => setName(e.target.value)} />
                        </Form.Item>
                        <Form.Item label="专业" name="defenceMajorId" rules={[{ required: true, message: "请选择专业" }]} style={{ width: '400px' }}>
                            <Select>
                                {
                                    state.map((item, index) => {
                                        return <Select.Option key={index} value={index}>{item.name}</Select.Option>
                                    })
                                }
                            </Select>
                        </Form.Item>
                    </div>
                    <div className='ant-form-item3'>
                        <Form.Item name="time" label="答辩时间" {...rangeConfig}>
                            <RangePicker onChange={() => changeDate.bind(this)} format="YYYY-MM-DD" style={{ width: '500px' }}
                                defaultPickerValue={[moment('2021/06/01', dateFormat), moment('2021/07/01', dateFormat)]}
                            />
                        </Form.Item>
                        <Form.Item></Form.Item>
                    </div>
                    <div className='ant-form-item4'>
                        <Form.Item
                            style={{ width: '400px' }}
                            label="班级/计划"
                            name="classplan"
                            rules={[
                                { type: 'array', required: true, message: '请选择班级/计划' },
                            ]}
                        >
                            <Cascader options={residences as any} />
                        </Form.Item>
                        <Form.Item label="答辩地址" name="defenceAdress" rules={[{ required: true, message: "请选择答辩地址" }]} style={{ width: '400px' }}>
                            <Input value={commitName} onChange={e => setCommitName(e.target.value)} />
                        </Form.Item>
                    </div>
                    <Form.Item className='defenceAuthorName' label="发起人" name="defenceAuthorName" >
                        <span>郭老师</span>
                    </Form.Item>
                </Form>
            </div>
            <div className='group_defence_detail'>
                <div className='group'>
                    {
                        list.map((item: RootGroup, index: number) => {
                            return <div className='group_list' key={index}>
                                <h2>{item.groupname}</h2>
                                <div className='top'>
                                    <div className='top_item'>
                                        <span>成员{item.members}名</span> |
                                        <span>任务{item.finished}个</span> |
                                        <span>时长{item.groupProgress}小时</span>
                                    </div>
                                    <div className='top_item'>
                                        <span>清空</span>
                                        <span> <input type="checkbox" name="" id="" /> 已完成未评分</span>
                                        <span> <input type="checkbox" name="" id="" /> 已答辩</span>
                                    </div>
                                </div>
                                {
                                    item.myProject.map((item1, index1) => {
                                        return <div className='name' key={index1}>
                                            <span>姓名</span>
                                            <span>{item1.proname}</span>
                                            <span></span>
                                            <span></span>
                                        </div>
                                    })
                                }
                                {
                                    item.stuList.map((item2, index2) => {
                                        return <div className='name' key={index2}>
                                            <span>{item2.username}</span>
                                            <span></span>
                                            <span></span>
                                            <span></span>
                                        </div>
                                    })
                                }
                            </div>
                        })
                    }
                </div>

            </div>
        </div>
        <div className='save_btn'></div>
    </div>
}
export default addDefence;